 <template>
  <div id="app">
    <!-- router-link 导航组件，可以改变浏览器的地址 -->
    <router-link to="/discover">发现</router-link>
    |
    <router-link to="/friend">朋友</router-link>
    |
    <router-link to="/playlist">歌单</router-link>
    |
    <router-link to="/list">列表</router-link>
    |
    <router-link to="/detail">详情页</router-link>
    |
    <router-link to="/vuex">vuex计数器</router-link>
    |
    <router-link to="/vuexTwo">vuex的剩余属性练习</router-link>

    <button @click="jump">一个朴实无华的编程式导航按钮</button>
    <router-view></router-view>
    
    <router-view name="putong"></router-view>
    <router-view name="god"></router-view>
  </div>
</template> 
<script> 
// import from ''
// 编程式导航，通过js来实现页面导航
export default {
  methods:{
    jump(){
      // 1.push 跳转页面并且将历史记录添加到记录栈[baidu.com,google.com]
      // this.$router.push('路径',{携带参数})
      // this.$router.push({name:xx},{})||({path:xxx},{})
      // 不传参用法：
      // this.$router.push('/playlist')
      // this.$router.push({name:'tp'})
      // 传递参数的用法：
      // 01.传递参数query
      // this.$router.push('/playlist?name=李雷')
      // this.$router.push({path:'/playlist',query:{name:"韩梅梅"}})
      // 02.传递params，只能使用name跳转，path跳转会失败
      // 面试题：params会有什么问题？===》刷新会丢失
      //        怎么解决？=============》1.用query 2.可以将params存到本地
      // this.$router.push({name:"pl",params:{gift:'钻石'}})
      // 2.replace 添转页面，但是会替换上一个历史记录 goole.com
      // 3.go 就是跳到哪一个记录[baidu,goole,qf] 当前所在下标永远为0
      // 4.back 返回上一个历史记录
      // 5.forward 前进一个历史记录
    }
  }
}
</script> 